<!DOCTYPE html>

<html class="app-ui" >
    <head>
        <!-- Meta -->
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <!--查询动作-1  -->
<!--        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<!--        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.0/vue.js"></script>-->
            <script src="js/axios.min.js"></script>
            <script src="js/vue.js"></script>

    </head>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            padding: 0;
        }
    </style>
    <body  class="app-ui layout-has-drawer layout-has-fixed-header" >
    <!--增加动作-1 写一个表单 -->
        <div id="app" class="card-block">
            <!--增加动作-0 初始页面 -->
            <button name="" @click="create" >新增</button>
            <!--增加动作-3 调用增加方法 -->
            <button v-show="isCreate" @click="confirmCreate" >确认增加</button>
            <div v-show="isCreate" class="createNewUser card-block">
                <label for="userId">用户编号</label>
                <input id="userId"  type="text" v-model="newInfo.userId" >
                <label for="userMail">用户邮箱</label>
                <input id="userMail"  type="text" v-model="newInfo.userMail" >
                <label for="userName">用户名字</label>
                <input id="userName"  type="text" v-model="newInfo.userName" >
                <label for="userPhone">用户手机</label>
                <input id="userPhone"  type="text" v-model="newInfo.userPhone" >
            </div>
            <table class="table table-bordered table-striped table-vcenter js-dataTable-simple" >
                <thead>
                <tr>
                    <th>用户编号</th>
                    <th>用户邮箱</th>
                    <th>用户名字</th>
                    <th>用户手机</th>

                    <th>操作</th>
                </tr>
                </thead>
                <tbody >
                <div class="table">
                    <!--查询动作-4 info数据显示 -->
                    <tr class="odd gradeX" v-for="(value,index) in info"  :key="index">
                        <td><input :class="{isedit:thisIndex===index}" class="notedit" type="text" :disabled="!(thisIndex===index)" v-model="value.userId"></td>
                        <td><input :class="{isedit:thisIndex===index}" class="notedit" type="text" :disabled="!(thisIndex===index)" v-model="value.userMail"></td>
                        <td><input :class="{isedit:thisIndex===index}" class="notedit" type="text" :disabled="!(thisIndex===index)" v-model="value.userName"></td>
                        <td><input :class="{isedit:thisIndex===index}" class="notedit" type="text" :disabled="!(thisIndex===index)" v-model="value.userPhone"></td>
                        <td class="text-center">
                            <div class="btn-group">
                                <!--修改动作-1 修改按钮事件 -->
                                <button
                                @click="thisIndex=index"
                                class="btn btn-xs btn-default" 
                                type="button" 
                                data-toggle="tooltip" 
                                title="Edit Client">
                                    修改
                                </button>
                                <!--删除动作-1 删除按钮事件   -->
                                <button 
                                class="btn btn-xs btn-default" 
                                type="button" 
                                data-toggle="tooltip" 
                                title="Remove Client"
                                @click="deleteItem(index)">
                                   删除
                                </button>
                                <!--修改动作-2 保存按钮事件 -->
                                <button @click="save(index)" class="btn btn-xs btn-default" type="button" data-toggle="tooltip" title="Remove Client">
                                    <span>保存</span>
                                </button>
                            </div>
                        </td>
                    </tr>
                </div>

                </tbody>
            </table>
        </div>
        <script>
            const app = new Vue({
                methods:{
                    <!--查询动作-2  -->
                    //获取列表
                    getList(){
                        axios.get('http://localhost:8080/vue_userinfo?op=ui_list').then(response=>{
                           // console.log(response);
                            if(response.status === 200){
                                this.info=response.data //   赋值给info
                            }
                        })

                    },
                    //新增按钮事件,显示表单
                    create(){
                        this.isCreate = !this.isCreate
                    },
                    <!--增加动作-4 调用增加方法 -->
                    //确认新增
                    confirmCreate(){
                        axios.post('http://localhost:8080/vue_userinfo?op=ui_save',this.newInfo).then(response=>{
                           // console.log("确认新增:"+this.newInfo.userName+"======");
                          //  console.log(response);
                            if(response.status === 200){
                               // console.log(response.data.ms);
                                this.getList()
                                // this.newInfo={
                                //         userId:'',
                                //         userMail:'',
                                //         userName:'',
                                //         userPhone:''
                                // }
                                this.isCreate = !this.isCreate //关闭显示表单
                               // alert('新增成功')
                            }
                        })
                    },
                    <!--删除动作-2 删除按钮事件   -->
                    //删除按钮事件
                    deleteItem(index){
                        if (confirm("您确定要执行此操作吗？"+index)) {
                            axios.post('http://localhost:8080/vue_userinfo?op=ui_del',this.info[index]).then(response=>{
                            if(response.status===200){
                                this.getList()
                              //  alert('删除成功')
                            }
                        })
                        } else {
                            alert('已取消删除')
                        }

                    },
                    <!--修改动作-3 保存按钮事件 -->
                    //保存按钮事件
                    save(index){
                        axios.post('http://localhost:8080/vue_userinfo?op=ui_upadte',this.info[index]).then(response=>{
                            if(response.status === 200){
                              //  console.log(response.data);
                                this.getList()
                               // alert('编辑成功')
                            }
                        })
                        this.thisIndex=''
                    },
                    removeEdit(){

                    }
                },

                data(){
                    return{
                        <!--查询动作-3 info数据初始化集合对象 -->
                        info: [],
                        thisIndex:'',
                        isCreate:false,
                        <!--增加动作-2 newInfo来传递数据OOP -->
                        newInfo:{
                            userId:'1001',
                            userMail:'111@qq.com',
                            userName:'矣三三',
                            userPhone:'1134567890'
                        }
                    }
                },
                <!--查询动作-5 调用方法-->
                mounted(){
                    //Vue生命周期中第四个函数：该函数在执行过程中，已经将数据渲染到界面中，并且已经更新页面。
                    this.getList()
                }
            })
            const vm = app.$mount("#app")
            console.log("-------------ok-----------------")
        </script>
    </body>
    <style>
        .createNewUser{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
        .createNewUser input{
            border-radius: 10px;
            outline: none;
            border: 1px solid rgb(115, 115, 115);
        }
        .table tr td input{
            width: 150px;
        }
        .notedit{
            outline: none;
            border: none;
            background: transparent;
        }
        .isedit{
            outline:0;
            border: 1px solid rgb(160, 159, 159);
            border-radius: 5px;
        }
        .btn-group{
            display: flex;
        }
    </style>
</html>